<template>
    <div class="madp-large-image" v-if="visible">
        <div class="madp-large-image-box">
            <div class="madp-large-image-box-close" @click="onClose">
                <img :src="imgUrl" alt="" />
                <i class="el-icon-close"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['visible', 'imgUrl'],
    data() {
        return {};
    },
    methods: {
        onClose() {
            this.$emit('close');
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-large-image {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba($color: #000000, $alpha: 0.5);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    &-box {
        // position: relative;
        &-close {
            font-size: 48px;
            color: #ff6699;
            position: relative;
            cursor: pointer;
            .el-icon-close {
                font-weight: bold;
                top: 0;
                position: absolute;
            }
        }
        img {
            width: 600px;
            object-fit: contain;
        }
    }
}
</style>
